<!DOCTYPE html>
<html lang="en" style="height: 100%;">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript" src="../js/jquery-2.2.0.min.js"></script>
		<!-- 导入背景图片 -->
		<link rel="stylesheet" href="../css/font_index_background.css">
<!--		<link rel="stylesheet" href="../css/font_top.css">-->
		<link rel="stylesheet" href="../css/layer.css">
		<link rel="shortcut icon" href="../img/icon.jpg">
		<title>基于深度学习的道路能见度监测预警系统</title>
		<style>
			body::-webkit-scrollbar {
				display:none
			}
			.sco::-webkit-scrollbar {
				display:none
			}
			.city{
				color: white;
				font-family: '宋体';
				margin-left: 26px;
			}
			.alert-city{
				color: white;
				font-family: '宋体';
				margin-left: 26px;
			}
			.city:hover{
				color: orangered;
				cursor: pointer;
			}
			.input-class .el-input__inner{
				width: 150px;
				height: 30px;
				background-color: gray;
				color: white;
			}
			.input-class .el-input__icon{
				line-height: 30px;
			}
			.input-class{
				width: 75% !important;
			}
			.input-class:hover{
				cursor: pointer;
			}
			.el-input__inner:hover{
				cursor: pointer;
			}
			/*.myBtn{*/
			/*	width: 20px;*/
			/*	height: 10px;*/
			/*}*/
			/*.myBtn span{*/

			/*}*/
		</style>
	</head>
	<body>
		<canvas id="canvas" style="position:absolute;z-index:-1;background-color: #226FB7;"></canvas>
		<div class='head' id="top" style="z-index: 1"></div>
		<script type="text/javascript" src="../js/echarts/echarts.min.js"></script>
		<!-- 地图显示范围 -->
		<div style="height: 100%;" id="app">
			<div id="container" style="width: 70%;height: 100%;float: left;z-index: 999"></div>
			<div style="width: 200px;height: 320px;float: right;margin-right: 25px;margin-top:70px;background-color: #222222;border-radius: 20px;">
				<!-- 标题title -->
				<div style="width: 100%; margin-top: 5px;">
					<span style="color: white;font-family: '楷体';text-align: center;display: block;margin-top: 23px">城市雾浓度历史总排行</span>
					<hr style="margin-top: 19px;width: 100%; background-color:gray; height:2px; border:none;"/>
				</div>
				<!-- 滚动条 -->
				<div class="sco" style="position: relative;overflow-y: scroll;height: 260px;">
					<div>
						<!-- 一个城市 -->
						<div>
							<span class="city" style="margin-left: 20px;">城市名</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 15px;">历史总和</span>
						</div>
						<hr style='width: 100%; background-color:gray; height:2px; border:none;'/>
					</div>
					<!-- 各个城市排行展示 -->
					<div v-for="cityHistoryInfo in cityHistoryLevelList">
						<!-- 一个城市 -->
						<div>
							<span class="city" @click="changeCity(cityHistoryInfo.city)">{{cityHistoryInfo.city}}</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 30px;">{{cityHistoryInfo.totalValue}}</span>
						</div>
						<hr style='width: 90%; background-color:gray; height:2px; border:none;'/>
					</div>
				</div>
			</div>
			<div style="width: 200px;height: 320px;float: right;margin-right: 10px;margin-top:70px;background-color: #222222;border-radius: 20px;">
				<!-- 标题title -->
				<div style="width: 100%; margin-top: 5px;display: flex;flex-direction: column;">
					<span style="color: white;font-family: '楷体';text-align: center;display: block;">浓雾城市预警</span>
					<div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
						<el-date-picker
								class="input-class"
								v-model="dateInfo"
								align="right"
								type="date"
								placeholder="日期"
								:picker-options="pickerOptions"
								@change="selectByDate">
						</el-date-picker>
<!--						<el-button type="info" size="mini" icon="el-icon-search" @click="selectByDate()"></el-button>-->
					</div>
					<hr style='width: 100%; background-color:gray; height:2px; border:none;'/>
				</div>
				<!-- 滚动条 -->
				<div class="sco" style="position: relative;overflow-y: scroll;height: 260px;">
					<div>
						<!-- 一个城市 -->
						<div>
							<span class="city" style="margin-left: 20px;">城市名</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 21px;">雾情况</span>
						</div>
						<hr style='width: 100%; background-color:gray; height:2px; border:none;'/>
					</div>
					<!-- 各个城市排行展示 -->
					<div v-for="cityInfo in cityAlertList">
						<!-- 一个城市 -->
						<div>
							<span class="alert-city city" @click="selectCity(cityInfo.city)">{{cityInfo.city}}</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 30px;" v-if="cityInfo.level==0">无雾</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 30px;" v-if="cityInfo.level==1">轻雾</span>
							<span style="color: white;font-family: '宋体';float: right;margin-right: 30px;" v-if="cityInfo.level==2">浓雾</span>
						</div>
						<hr style='width: 90%; background-color:gray; height:2px; border:none;'/>
					</div>
				</div>
			</div>
			<div style="display:flex;flex-direction:column;align-items:center;width: 410px;height: 300px;float: right;margin-right:25px;margin-top:30px;background-color: #222222;border-radius: 20px;">
				<div style="color: white;height: 20px;margin-top: 1rem;">城市名：{{selectedCity}}</div>
				<div id="secondChart" style="width: 410px;height: 290px;"></div>
<!--				<div style="font-size: 12px;color: whitesmoke">地图以中国国家相关出版社或国家相关国家地图网站相关地图为准</div>-->
			</div>
		</div>
		<script>
			$("#top").load("top-index.html");
		</script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<!-- 引入ElementUI -->
		<script type="text/javascript" src="../ElementUI/index.js"></script>
		<link rel="stylesheet" type="text/css" href="../ElementUI/index.css"/>
		<!-- 地图显示范围 --><!--		vue区域-->
		<script type="text/javascript" src="../js/echarts/dataTool.min.js"></script>
		<script type="text/javascript" src="../js/echarts/echarts-gl.min.js"></script>
		<script type="text/javascript" src="../js/echarts/ecStat.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=wkGz5PE2U42BRy1HunkXYHThjZiv3tP2"></script>
		<script type="text/javascript" src="../js/echarts/bmap.min.js"></script>
		<script type="text/javascript" src="../js/layer.js"></script>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() > Date.now();
						},
						// shortcuts: [{
						// 	text: '今天',
						// 	onClick(picker) {
						// 		picker.$emit('pick', new Date());
						// 	}
						// }, {
						// 	text: '昨天',
						// 	onClick(picker) {
						// 		const date = new Date();
						// 		date.setTime(date.getTime() - 3600 * 1000 * 24);
						// 		picker.$emit('pick', date);
						// 	}
						// }, {
						// 	text: '一周前',
						// 	onClick(picker) {
						// 		const date = new Date();
						// 		date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
						// 		picker.$emit('pick', date);
						// 	}
						// }]
					},
					dateInfo: '',
					selectedCity:"",
					data : [
						{name: '衢州', value: 177},
						{name: '廊坊', value: 193},
						{name: '菏泽', value: 194},
						{name: '合肥', value: 229},
						{name: '武汉', value: 273},
						{name: '大庆', value: 279}
					],
					geoCoordMap : {
						'衢州': [118.88, 28.97],
						'廊坊': [116.7, 39.53],
						'菏泽': [115.480656, 35.23375],
						'合肥': [117.27, 31.86],
						'武汉': [114.31, 30.52],
						'大庆': [125.03, 46.58],
						'大庆': [125.03, 46.58],
						'大庆': [125.03, 46.58]
					},
					cityAlertList:[
						{
							"city": "南昌",
							"value": 23,
							"level": 2
						}
					],
					cityHistoryLevelList:[
						{
							"city": "南昌",
							"totalValue": 45
						}
					],
					// 第二章图表
					option : {
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'line',
							symbol: 'circle',
							symbolSize: 10,
							lineStyle: {
								color: '#5470C6',
								width: 4,
								type: 'dashed'
							},
							itemStyle: {
								borderWidth: 3,
								borderColor: '#EE6666',
								color: 'yellow'
							},
							label:{
								show:true
							}
						}]
					}
				},
				methods: {
					drawMap: function () {
						var myChart = echarts.init(document.getElementById("container"));
						myChart.setOption({
							backgroundColor: 'transparent',
							title: {
								text: '基于深度学习的道路能见度监测预警系统',
								subtext: '地图以中国国家相关出版社或国家相关国家地图网站相关地图为准',
								// sublink: 'http://www.pm25.in',
								left: 'center',
								textStyle: {
									color: '#fff'
								},
							},
							tooltip: {
								trigger: 'item'
							},
							bmap: {
								center: [115.83108, 27.42812],
								zoom: 8,
								roam: true,
								mapStyle: {
									styleJson: [
										{
											"featureType": "water",
											"elementType": "all",
											"stylers": {
												"color": "#044161"
											}
										},
										{
											"featureType": "land",
											"elementType": "all",
											"stylers": {
												"color": "#004981"
											}
										},
										{
											"featureType": "boundary",
											"elementType": "geometry",
											"stylers": {
												"color": "#064f85"
											}
										},
										{
											"featureType": "railway",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "highway",
											"elementType": "geometry",
											"stylers": {
												"color": "#004981"
											}
										},
										{
											"featureType": "highway",
											"elementType": "geometry.fill",
											"stylers": {
												"color": "#005b96",
												"lightness": 1
											}
										},
										{
											"featureType": "highway",
											"elementType": "labels",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "arterial",
											"elementType": "geometry",
											"stylers": {
												"color": "#004981"
											}
										},
										{
											"featureType": "arterial",
											"elementType": "geometry.fill",
											"stylers": {
												"color": "#00508b"
											}
										},
										{
											"featureType": "poi",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "green",
											"elementType": "all",
											"stylers": {
												"color": "#056197",
												"visibility": "off"
											}
										},
										{
											"featureType": "subway",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "manmade",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "local",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "arterial",
											"elementType": "labels",
											"stylers": {
												"visibility": "off"
											}
										},
										{
											"featureType": "boundary",
											"elementType": "geometry.fill",
											"stylers": {
												"color": "#029fd4"
											}
										},
										{
											"featureType": "building",
											"elementType": "all",
											"stylers": {
												"color": "#1a5787"
											}
										},
										{
											"featureType": "label",
											"elementType": "all",
											"stylers": {
												"visibility": "off"
											}
										}
									]
								}
							},
							series: [
								{
									name: 'pm2.5',
									type: 'scatter',
									coordinateSystem: 'bmap',
									data: this.convertData(this.data),
									encode: {
										value: 2
									},
									symbolSize: function (val) {
										return val[2]/1;	//这个可以调整圆圈的大小
									},
									label: {
										formatter: '{b}',
										position: 'right'
									},
									itemStyle: {
										color: '#ddb926'
									},
									emphasis: {
										label: {
											show: true
										}
									}
								},
								{
									// name: '雾等级',
									type: 'effectScatter',
									coordinateSystem: 'bmap',
									data: this.convertData(this.data.sort(function (a, b) {
										return b.value - a.value;
									}).slice(0, 6)),
									encode: {
										value: 2
									},
									symbolSize: function (val) {
										return val[2] / 1;	//这个可以调整圆圈的大小
									},
									showEffectOn: 'emphasis',  //黄点是否有抖动效果
									rippleEffect: {
										brushType: 'stroke'
									},
									hoverAnimation: true,
									label: {
										formatter: '{b}',
										position: 'right',
										show: true
									},
									itemStyle: {
										color: '#f4e925',
										shadowBlur: 10,
										shadowColor: '#333'
									},
									zlevel: 1
								},
							]
						})
					},
					drawTable: function(){
						var myChart2 = echarts.init(document.getElementById('secondChart'));
						myChart2.setOption(this.option);
					},
					convertData : function (data) {
						var res = [];
						for (var i = 0; i < data.length; i++) {
							var geoCoord = this.geoCoordMap[data[i].name];
							if (geoCoord) {
								res.push({
									name: data[i].name,
									value: geoCoord.concat(data[i].value)
								});
							}
						}
						return res;
					},
					changeCity: function (city) {
						console.log(city)
						this.selectedCity = city;
						axios.get("http://106.55.57.114:8888/font/cityLastWeekLevel?city="+city).then((res)=>{
							this.option.xAxis.data = res.data.timeList;
							this.option.series[0].data = res.data.valueList;
							this.drawTable();
						})
					},
					selectCity: function (city) {	//点击城市查看城市详情的方法
						var date =this.dateInfo;
						var tempwindow=window.open('_blank');
						if (!date){	//如果日期为空，则默认为今天
							tempwindow.location = "http://106.55.57.114:8888/font/city_detial.html?city="+city;
						}else {
							tempwindow.location = "http://106.55.57.114:8888/font/city_detial.html?city="+city+"&date="+date;
						}
					},
					selectByDate: function () {
						console.log(this.dateInfo);
						if (!this.dateInfo){	//如果日期数据是空的，则爆出弹窗
							layer.msg('您还未选择日期', {
								offset: 'auto',
								anim: 6
							});
						}else {
							axios.get("http://106.55.57.114:8888/font/cityAlert?date="+this.dateInfo).then((res)=>{
								this.cityAlertList = res.data;
							});
							axios.get("http://106.55.57.114:8888/font/fontFogLevelForMap?date="+this.dateInfo).then((res)=>{
								// console.log(res.data);
								this.data = res.data;
								axios.get("http://106.55.57.114:8888/font/cityDetailList").then((res)=>{
									// console.log(res.data);
									this.geoCoordMap = res.data;
									this.drawMap();
									// this.drawTable();
								})
							})
						}
					}
				},
				beforeCreate: function(){
					axios.get("http://106.55.57.114:8888/font/cityAlert").then((res)=>{
						this.cityAlertList = res.data;
						this.dateInfo = new Date();
					})
				},
				created: function () {
					axios.get("http://106.55.57.114:8888/font/fontFogLevelForMap").then((res)=>{
						// console.log(res.data);
						this.data = res.data;
						axios.get("http://106.55.57.114:8888/font/cityDetailList").then((res)=>{
							// console.log(res.data);
							this.geoCoordMap = res.data;
					this.drawMap();
					// this.drawTable();
						})
					})
					axios.get("http://106.55.57.114:8888/font/cityHistoryLevel").then((res)=>{
						this.cityHistoryLevelList = res.data;
						this.selectedCity = res.data[0].city
						this.changeCity(res.data[0].city)
					})
				}
			})
		</script>
		<!-- //第二张表格 -->
		<script type="text/javascript">
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
	
	
			canvas.height = window.innerHeight;
			canvas.width = window.innerWidth;
	
			var texts = '0123456789'.split('');
	
			var fontSize = 26;
			var columns = canvas.width/fontSize;
			// 用于计算输出文字时坐标，所以长度即为列数
			var drops = [];
			//初始值
			for(var x = 0; x < columns; x++){
				drops[x] = 1;
			}
	
			function draw(){
				//让背景逐渐由透明到不透明
				ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				//文字颜色
				ctx.fillStyle = '#3F85FF';
				ctx.font = fontSize + 'px arial';
				//逐行输出文字
				for(var i = 0; i < drops.length; i++){
					var text = texts[Math.floor(Math.random()*texts.length)];
					ctx.fillText(text, i*fontSize, drops[i]*fontSize);
	
					if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
						drops[i] = 0;
					}
	
					drops[i]++;
				}
			}
	
			setInterval(draw, 33);

			//第二个图表
			// var chartDom = document.getElementById('secondChart');
			// var myChart = echarts.init(chartDom);
			// var option;
			//
			// option = {
			// 	xAxis: {
			// 		type: 'category',
			// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			// 	},
			// 	yAxis: {
			// 		type: 'value'
			// 	},
			// 	series: [{
			// 		data: [120, 200, 150, 80, 70, 110, 130],
			// 		type: 'line',
			// 		symbol: 'circle',
			// 		symbolSize: 10,
			// 		lineStyle: {
			// 			color: '#5470C6',
			// 			width: 4,
			// 			type: 'dashed'
			// 		},
			// 		itemStyle: {
			// 			borderWidth: 3,
			// 			borderColor: '#EE6666',
			// 			color: 'yellow'
			// 		},
			// 		label:{
			// 			show:true
			// 		}
			// 	}]
			// };
			//
			// option && myChart.setOption(option);
		</script>
	</body>
</html>
